<template>
<div class="roles">
  <!-- 面包屑 -->
  <el-breadcrumb>
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 公共内容区域 -->
  <div class="page_content">
    <div class="search">
      <el-input
        v-model="keyWord"
        placeholder="请输入商品发布人进行查找"
        class="input-with-select"
        @keyup.enter="searchList"
      >
        <template #append>
        <el-button @click='searchList'><el-icon><Search /></el-icon></el-button>
        </template>
      </el-input>
      <el-button class="add" color="#626aef" :dark="isDark" plain @click='addUser'>添加商品</el-button>
    </div>
    <!-- 搜索结果显示 -->
    <div class="form" v-show="isSearchForm">
      <el-table :data="searchData" border style="width: 100%">
        <el-table-column prop="order" label="" width="60" />
        <el-table-column prop="classify" label="商品名称" width="300" />
        <el-table-column prop="name" label="发布者" width="150" />
        <el-table-column prop="category" label="商品类别" width="150" />
        <el-table-column prop="status" label="创建时间" width="150" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button style="margin-right:10px;" color="#626aef" :dark="isDark" plain @click="edit(scope.row)">编辑</el-button>
            <el-button  type="danger" plain @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="button" color="#626aef" :dark="isDark" plain @click="revert">返回</el-button>
    </div>
    <!-- 商品列表 -->
    <div class="form" v-show="isForm">
      <el-table :data="userList" border style="width: 100%">
        <el-table-column prop="order" label="" width="60" />
        <el-table-column prop="classify" label="商品名称" width="300" />
        <el-table-column prop="name" label="发布者" width="150" />
        <el-table-column prop="category" label="商品类别" width="150" />
        <el-table-column prop="status" label="创建时间" width="150" />
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button color="#626aef"  style="margin-right:20px; margin-left:20px;" :dark="isDark" plain @click="edit(scope.row)">编辑</el-button>
            <el-button color=" #c45656" :dark="isDark" plain @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
     <!-- 底部分页 -->
    <el-pagination class="pagination"
      v-show="isForm"
      background
      layout="prev, pager, next,jumper, ->"
      :total='total'
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      style="text-align: center">
    </el-pagination>
  </div>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" title="添加商品">
    <!-- 添加表单 -->
    <el-form
    ref = "userForm"
     :model="formData" :rules = 'rules'>
      <el-form-item label="商品名称" prop="classify">
        <el-input v-model="formData.classify" placeholder="请输入商品名称"/>
      </el-form-item>
      <el-form-item label="发布人" prop="name"> 
        <el-input v-model="formData.name" placeholder="请输入发布人名称"/>
      </el-form-item>
      <el-form-item label="商品类别" prop="category">
        <el-input v-model="formData.category" placeholder="请输入商品类别"/>
      </el-form-item>
    </el-form>
    <el-alert v-show="isNext" title="请按要求填写完整" type="warning" center show-icon />
    <template #footer>
      <div class="footer_button flex">
        <el-button type="primary" @click="addList(userForm)">确定</el-button>
        <el-button type="danger" @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
<!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible1" title="编辑商品信息">
    <!-- 编辑表单 -->
    <el-form
    ref = "editForm"
     :model="editList" :rules = 'rules1'>
      <el-form-item label="商品名称" prop="classify">
        <el-input v-model="editList.classify" placeholder="请输入商品名称"/>
      </el-form-item>
      <el-form-item label="发布人" prop="name"> 
        <el-input v-model="editList.name" placeholder="请输入发布人"/>
      </el-form-item>
      <el-form-item label="商品类别" prop="category">
        <el-input v-model="editList.category" placeholder="请输入商品类别"/>
      </el-form-item>
    </el-form>
    <el-alert v-show="isEdit" title="请按要求填写完整" type="warning" center show-icon />
    <template #footer>
      <div class="footer_button flex">
        <el-button type="primary" @click="changeEdit(editForm)">确定</el-button>
        <el-button type="danger" @click="cancelEdit(editForm)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>

<script>
import { reactive, toRefs, onUpdated, onMounted, ref} from 'vue'
import axios from 'axios'

export default {
  setup(){
    const data = reactive({
      value1: ref(true),
      value2: ref(true),
      keyWord:'',
      dialogFormVisible: false,
      dialogFormVisible1:false,
      isClosable: false,
      isForm: true,
      isSearchForm: false,
      currentPage: 1, //当前页 刷新后默认显示第一页
      pageSize: 10, //每一页显示的数据量 此处每页显示6条数据
      total : '',
      isNext: false,
      isEdit: false,
      searchData:[],
      searchList:[],
      formData:{
          classify: '',
          name:'',
          category:'',
          id:''
      },
      rules:{
        classify:[
          {required:true,message:'此项为必填',trigger:'blur'}
        ],
        name:[
          {required:false,message:'请填写正确的发布人名称',trigger:'blur'}
          ],
        category:[
          {required:true,message:'请填写正确商品类别',trigger:'blur'}
        ]
      },
      rules1: {
        classify:[
          {required:true,message:'此项为必填',trigger:'blur'}
        ],
        name:[
          {required:false,message:'请填写正确的发布人名称',trigger:'blur'}],
        category:[
          {required:true,
          message:'请填写正确商品类别',trigger:'blur'}
        ]
      },
      userList:[], 
      userLists:[],  // 用户列表数据
      editList:{},
      Data:{}
    })
    const changeState=()=>{
      if(data.userList.state == true){
        data.value1 = ref(false)
        data.value2 = ref(false)
      }
    }
    // 查
    const searchList=()=>{
      data.searchList = []
      data.searchData = []
      for( let i=0; i<data.userLists.length; i++) {
        if(data.keyWord == data.userLists[i].name){
          data.searchList.push(data.userLists[i])
        }
      }
      for(let i=0; i<data.searchList.length; i++){
        const newSearchList={
          order: i+1,
          identity: data.searchList[i].identity,
          title: data.searchList[i].id,
          classify: data.searchList[i].classify,
          name:data.searchList[i].name,
          category: data.searchList[i].category,
          state: data.searchList[i].state
        }
        data.searchData.push(newSearchList)
      }
      data.isSearchForm = true
      data.isForm = false
    }
    const revert=()=>{
      data.isForm = true
      data.isSearchForm = false
      data.keyWord = ''
    }
    const addUser=()=>{
      data.dialogFormVisible = true
    }
    const userForm = ref()
    const editForm =ref()
    // 增
    const addList=(userForm)=>{
      userForm.validate(res=>{
        if(!res){      //表单验证不通过，什么都不做
          data.isNext = true
          return data.isNext
        }
        //表单验证通过
        data.userLists.push(data.formData)
        data.userList = data.userLists.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
        data.dialogFormVisible = false
        data.total = data.userLists.length
        data.formData = {}
      })
    }
    //改
    const edit=(Data)=>{
      data.dialogFormVisible1 = true
      data.Data = Data
    } 
    const changeEdit=(editForm)=>{
      editForm.validate(res=>{
        if(!res){
          data.isEdit = true
          return data.isEdit
        }else{
      data.userLists[data.Data.order-1] = data.editList
      data.userList = data.userLists.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
      data.dialogFormVisible1 = false
        }
      })
    }
    const cancelEdit=(editData)=>{
      data.editList = editData
      data.dialogFormVisible1 = false
    }
    // 删
    const remove=(row)=>{
        // userLists 删除
        data.userLists.forEach((item,index)=>{
            if(item.identity == row.identity && item.name == row.name){
                data.userLists.splice(index, 1)
            }
        })
        for (let i=0;i<data.userLists.length;i++) {
        data.userLists[i].id = i+1
        }
        data.userList = data.userLists.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
        data.total = data.userLists.length
        //searchList 删除
        data.searchData.forEach((item,index)=>{
            if(item.classify == row.classify && item.identity == row.identity && item.name == row.name){
                data.searchData.splice(index, 1)
            }
        })    
        for (let i=0;i<data.userLists.length;i++) {
        data.userLists[i].id = i+1
        }
        for( let i=0; i< data.searchData.length; i++) {
            data.searchData[i].order = i+1
        }
        data.total = data.userLists.length
        data.userList = data.userLists.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
    }
    const cancel=()=>{
      data.formData = {}
      data.dialogFormVisible = false
    }
    onMounted(()=>{
      userLists(),
      axios.get('/commodity').then(res=>{
        data.userLists = res.data.users
        for (let i=0;i<data.userLists.length;i++) {
          data.userLists[i].order = i+1
        }
        data.userList = data.userLists.slice(0, 10)
        data.total = data.userLists.length
      }).catch(err=>{
        console.log(err)
      })
    })
    onUpdated(() => {
      for (let i=0; i<data.userLists.length; i++) {
        data.userLists[i].order = i+1
      }
    })
    const handleCurrentChange = (currentPage) => {
      data.currentPage = currentPage; 
      data.userList = data.userLists.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
    }
    // 商品列表
    const userLists=()=>{
    axios.get('/commodity').then(res=>{
      data.userLists = res.data.users
    }).catch(err=>{
      console.log(err)
    })
    }

    return{
      ...toRefs(data),
      searchList,
      revert,
      addUser,
      addList,
      cancel,
      changeState,
      remove,
      edit,
      userForm,
      editForm,
      handleCurrentChange,
      changeEdit,
      cancelEdit
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input {
    width: 60%;
  }
::v-deep .el-button {
  font-size:10px;
}
::v-deep .pagination {
  margin-top: 30px;
  margin-left: 25%;
}
::v-deep .el-pager li {
  margin: 0 15px;
}
.page_content {
  .search {
    width: 80%;
    height: 40px;
    display: flex;
    align-content: center;
    .el-input {    
      width: 400px;
      height: 40px;
    }
    .add {
      margin-left: 20px;
      width: 100px;
      height: 40px;
    }
  }
  .form {
    margin-top: 20px;
    .button {
      margin-top: 30px;
      margin-left: 90%;
    }
  }
  .el-dialog {
    .el-form {
      .el-form-item {
        margin-top: 20px;
        display: flex;
        .el-input {
          width: 20px;
          margin-bottom:20px;  
        }
      }
    }
    
  }
}
</style>